/**
 * Created by hao.cheng on 2017/4/13.
 */
import React, {Component} from 'react';
import {Layout, Icon} from 'antd';
import {withRouter} from 'react-router-dom';
import routes from '../../routes/config';
import SiderMenu from './SiderMenu';
import SiderSubMenu from './SiderSubMenu';
import './siderCustom.less';

const {Sider} = Layout;

class SiderCustom extends Component {

  state = {
    collapsed: false,
    selectedKey: '',
  };

  isSelect = true;


  menuClick = e => {
    this.setState({
      selectedKey: e.key,
      collapsed: true,
    },()=>this.isSelect = true);
    this.props.menuClick && this.props.menuClick(e.key);
  };
  submMenuClick = e => {
    console.log(e);
    // this.setState({
    //   selectedKey: e.key,
    //   collapsed: true,
    // });
    // this.props.menuClick && this.props.menuClick(e.key);
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  handleMouseOver = ()=>{
    if(!this.isSelect){
      this.setState({
        collapsed: false,
      });
    }
  }
  handleMouseOut = ()=>{
      this.setState({
        collapsed: true,
      },()=>this.isSelect= false);
  }
  render() {
    return (
      <div className="siderCustom-page">
        <Sider
          trigger={null}
          breakpoint="lg"
          collapsed={this.state.collapsed}
          style={{overflowY: 'auto'}}
          className="siderCustom-component"
          onMouseOver={this.handleMouseOver}
          onMouseLeave={this.handleMouseOut}
        >
          <div className="sider-header">
            <Icon
              onClick={this.toggle}
              type="menu-unfold"/>
            {!this.state.collapsed &&

            <span>全部功能导航</span>
            }
            {!this.state.collapsed &&
            <Icon type='right'/>
            }
          </div>
          <SiderMenu
            menus={routes.menus}
            onClick={this.menuClick}
            mode="inline"
            selectedKeys={[this.state.selectedKey]}
            className="menu-container"
          />
        </Sider>
        {
          this.state.collapsed&&
          <SiderSubMenu
            menus={routes.menus}
            onClick={this.subMenuClick}
            mode="inline"
            selectedKeys={[this.state.selectedKey]}
            className="menu-container siderCustom-component"
          />
        }
      </div>
    )
  }
}

export default withRouter(SiderCustom);
